<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>校情分析</title>
	<link type="text/css" rel="stylesheet" th:href="@{/css/all.css}"/>
	<link type="text/css" rel="stylesheet" th:href="@{/plugin/AmazeUI/css/swiper.min.css}"/>
	<link type="text/css" rel="stylesheet" th:href="@{/plugin/AmazeUI/css/amazeui.min.css}"/>
	<link type="text/css" rel="stylesheet" th:href="@{/plugin/AmazeUI/css/wap.css}"/>
	<link type="text/css" rel="stylesheet" th:href="@{/plugin/AmazeUI/js/cm.js}"/>
	<link type="text/css" rel="stylesheet" th:href="@{/plugin/AmazeUI/js/amazeui.min.js}"/>

	<script language='javascript' th:src='@{/js/echarts.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/jQuery/jQuery-2.2.0.min.js}'></script>
	<script language='javascript' th:src='@{/js/constant.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/bootstrap/js/bootstrap.min.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/bootstrap-table/bootstrap-table.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/adminLTE/js/app.min.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/lobibox/dist/js/lobibox.js}'></script>
	<script language='JavaScript' th:src='@{/js/network.js}'></script>
	<script language='JavaScript' th:src='@{/js/common.js}'></script>
	<script language='JavaScript' th:src='@{/js/public.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/iCheck/icheck.min.js}'></script>
	<style type="text/css">
		.pet_head_block{
			max-width: 100%;
			line-height:40px;
		}
		.pet_more_list_block_line{
			width:110px;
		}
		.nav-tabs-custom > .nav-tabs > li{
			border-top:0px;
		}
		.nav-tabs-custom > .nav-tabs > li.active{
			border-top-color:#ffffff26;
			padding-bottom: 1px;
		}
		.nav-tabs-custom > .nav-tabs > li.active > a{
			color: #00adef;
			border-bottom-color:#00adef;
		}
		.nav-tabs-custom > .nav-tabs > li.active > a{
			border-left-color:#00000000;
			border-right-color:#00000000;
		}
	</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
	<header data-am-widget="header" class="am-header am-header-default pet_head_block" style="height: 40px;">
      <div class="am-header-left am-header-nav ">
          <a href="<%=basePath %>mobile/index/toIndex" class="iconfont pet_head_jt_ico">&#xe613;</a>
      </div>
      <div class="pet_news_list_tag_name" style="line-height:40px;">校情概览</div>
<!--       <div class="am-header-right am-header-nav"> -->
<!--           <a href="javascript:;" class="iconfont pet_head_gd_ico">&#xe605;</a> -->
<!--       </div> -->
    </header>
	<div class="pet_mian">
		<div class="pet_more_list">
			<div class="pet_more_list_block">
				<div class="iconfont pet_more_close">×</div>
				<div class="pet_more_list_block">
					<div class="pet_more_list_block_name">
<!--						<c:forEach var="menu" items="${menuList }">
					        <a href="<%=basePath %>${menu.menuUrl}" class="pet_more_list_block_line">
					            <i class="iconfont ${menu.menuColor } pet_more_list_block_line_ico"><i class="fa ${menu.menuIcon }"></i></i>
					            <div class="pet_more_list_block_line_font">${menu.menuCaption }</div>
					        </a>
				    	</c:forEach>-->
					</div>
				</div>
			</div>
		</div>
	</div>
	
    <section class="content-header" style="padding: 0px;">
    	<div class="nav-tabs-custom no-margin">
	        <ul class="nav nav-tabs flex-layout">
				<li class="active"><a href="javascript:void(0);">教师</a></li>
	            <li><a href="<%=basePath %>mobile/school/toSchoolStudent">学生</a></li>
	            <li><a href="<%=basePath %>mobile/school/toSchoolDept">学院</a></li>
	            <li><a href="<%=basePath %>mobile/school/toSchoolKY">科研</a></li>
	            <li class="pull-right  header"></li>
	        </ul>
        </div>
    </section>
    
    <section class="content" style="padding: 0px;">
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="box box-default">
					<div class="box-header with-border">
						<h3 class="box-title">教职工类别</h3>
						<div class="box-tools pull-right">
							<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
						</div>
					</div>
					<div class="box-body">
						<div class="row">
							<div class="col-md-8">
								<div class="chart-responsive">
									<div id="pieChart1" style="width: 100%;height: 200px;"></div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="box box-success">
									<div class="box-body" style="font-size: 12px">
									 	<table id="JSLBTable"  class="table-no-bordered"
											data-search-on-enter-key="true" data-id-field="id" data-unique-id="id"
											data-click-to-select="true"  data-side-Pagination="server" data-cache="false">
											<thead>
												<tr>
										        	<th data-field="JSLB" data-align="left" data-halign="left" 
										          		data-valign="middle" data-sortable="false" >教师类别</th>
										        	<th data-field="NUM" data-align="left" data-halign="left" 
										          		data-valign="middle" data-sortable="false" >人数</th>
										        	<th data-field="BFB" data-align="left" data-halign="left" 
										          		data-valign="middle" data-sortable="false">百分比</th>	
												</tr>
											</thead>
									 	</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="box box-default">
	            	<div class="box-header with-border">
						<h3 class="box-title">教职工性别情况</h3>
						<div class="box-tools pull-right">
							<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
						</div>
					</div>
		            <div class="box-body">
		            	<div class="row">
		                	<div class="col-md-5 col-sm-5 col-xs-5">
		                		<div class="chart-responsive">
		                    		<div id="pieChart2" style="width: 100%;height: 140px;"></div>
		                  		</div>
		                	</div>
		                	<div class="col-md-7 col-sm-7 col-xs-7" style="padding-left: 0px;">
		                  		<div class="box box-success">
				            		<div class="box-body" style="padding: 0px;font-size: 12px;">
				            			<table id="XBTable"  class="table-no-bordered"
		                   					data-search-on-enter-key="true" data-id-field="id" data-unique-id="id"
		                   					data-click-to-select="true"  data-side-Pagination="server" data-cache="false">
						               		<thead>
							             		<tr>
								                    <th data-field="XB" data-align="left" data-halign="left" 
								                    	data-valign="middle" data-sortable="false" >身份</th>
								                    <th data-field="CNT" data-align="left" data-halign="left" 
								                    	data-valign="middle" data-sortable="false" >人数</th>
								                    <th data-field="ZB" data-align="left" data-halign="left" 
								                    	data-valign="middle" data-sortable="false" >占比</th>
						                 		</tr>
						                	</thead>
				            			</table>
					          		</div>
								</div>
			               </div>
		              </div>
			      </div>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="box box-default">
	            	<div class="box-header with-border">
						<h3 class="box-title">教职工年龄分布</h3>
						<div class="box-tools pull-right">
							<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
						</div>
					</div>
		            <div class="box-body">
		            	<div class="row">
		                	<div class="col-md-6 col-sm-6 col-xs-6">
		                		<div class="chart-responsive">
		                    		<div id="pieChart3" style="width: 100%;height: 180px;"></div>
		                  		</div>
		                	</div>
		                	<div class="col-md-6 col-sm-6 col-xs-6" style="padding-left: 0px;">
		                  		<div class="box box-success">
				            		<div class="box-body" style="padding: 0px;font-size: 12px;">
				            			<table id="ageTable"  class="table-no-bordered"
		                   					data-search-on-enter-key="true" data-id-field="id" data-unique-id="id"
		                   					data-click-to-select="true"  data-side-Pagination="server" data-cache="false">
						               		<thead>
							             		<tr>
								                    <th data-field="AGE" data-align="left" data-halign="left" 
								                    	data-valign="middle" data-sortable="false" >年龄</th>
								                    <th data-field="CNT" data-align="left" data-halign="left" 
								                    	data-valign="middle" data-sortable="false" >人数</th>
								                    <th data-field="ZB" data-align="left" data-halign="left" 
								                    	data-valign="middle" data-sortable="false" data-visible="false">占比</th>
						                 		</tr>
						                	</thead>
				            			</table>
					          		</div>
								</div>
			               </div>
		              </div>
			      </div>
				</div>
			</div>
		</div>
      	
    </section>
</div>

<script type="text/javascript">
/*
	function getChart(c, u) {
		var myChart = echarts.init(document.getElementById(c));
		var func_link = u;
		var params = {func_link: func_link};
		ajax.getData(publicData.urls.analysis.cfg.getChartsByUrl, params, function (data) {
			if(data != null && data != "" && data != "null") {
				var optData = data[0];
				var json = JSON.parse(optData);
				var jsonObj = eval('(' + json + ')');
				if(typeof jsonObj === "object") {
					myChart.setOption(jsonObj);
				} else {
					myChart.setOption(null);
				}
			}
		});
	}
	getChart("pieChart1", "/mobile/xqgl/jslb");
	//教师类别表
	//加载表格
	function getTable(){
		var func_link = "/mobile/xqgl/jslbTable";
		var params = "func_link="+func_link;
		$("#JSLBTable").bootstrapTable({url: publicData.urls.analysis.cfg.getOneTableByUrl + "?" + params,pageSize:5});
	}
	getTable();
	
	function getChart2(c, u) {
		var myChart = echarts.init(document.getElementById(c));
		var func_link = u;
		var params = {func_link: func_link};
		ajax.getData(publicData.urls.analysis.cfg.getChartsByUrl, params, function (data) {
			if(data != null && data != "" && data != "null") {
				var optData = data[0];
				var json = JSON.parse(optData);
				var jsonObj = eval('(' + json + ')');
				if(typeof jsonObj === "object") {
					myChart.setOption(jsonObj);
					myChart.setOption(option={
							color : ['#F56954','#00C0EF'],
							legend: {
						        x: 'center',
						        top:5,
						        data:['男','女']
						    },
							series:[{
								center:['50%','65%'],
								label:{
								    normal: {
								        show: false,
								       /!*  position: 'outside',
	 							        formatter: "{b}\n{c}({d}%)" *!/
								    },
					                emphasis: {
					                    show: false,
					                    textStyle: {
					                        fontSize: '30',
					                        fontWeight: 'bold'
					                    }
					                },
								}
							}]
						});
				} else {
					myChart.setOption(null);
				}
			}
		});
	}
	
	getChart2("pieChart2", "/mobile/jzggk/xbb");
	
	function getTable2(){
		var func_link = "/mobile/jzggk/xbbmx";
		var params = "func_link="+func_link;
		$("#XBTable").bootstrapTable({url: publicData.urls.analysis.cfg.getOneTableByUrl + "?" + params,pageSize:5});
	}
	getTable2(); 
	
	function getChart3(c, u) {
		var myChart = echarts.init(document.getElementById(c));
		var func_link = u;
		var params = {func_link: func_link};
		ajax.getData(publicData.urls.analysis.cfg.getChartsByUrl, params, function (data) {
			if(data != null && data != "" && data != "null") {
				var optData = data[0];
				var json = JSON.parse(optData);
				var jsonObj = eval('(' + json + ')');
				if(typeof jsonObj === "object") {
					myChart.setOption(jsonObj);
					myChart.setOption(option={
							legend: {
						        x: 'center',
						        top:5,
						        data:['20-30岁','31-40岁','41-50岁','50以上']
						    },
							series:[{
								center:['50%','65%'],
								label:{
								    normal: {
								        show: false,
								       /!*  position: 'outside',
	 							        formatter: "{b}\n{c}({d}%)" *!/
								    },
					                emphasis: {
					                    show: false,
					                    textStyle: {
					                        fontSize: '30',
					                        fontWeight: 'bold'
					                    }
					                },
								}
							}]
						});
				} else {
					myChart.setOption(null);
				}
			}
		});
	}
	
	getChart3("pieChart3", "/mobile/jzggk/nlb");
	
	function getTable3(){
		var func_link = "/mobile/jzggk/nlbmx";
		var params = "func_link="+func_link;
		$("#ageTable").bootstrapTable({url: publicData.urls.analysis.cfg.getOneTableByUrl + "?" + params,pageSize:5});
	}
	getTable3(); 

    $('.pet_head_gd_ico').on('click',function(){
        $('.pet_more_list').addClass('pet_more_list_show');
    });
    $('.pet_more_close').on('click',function(){
        $('.pet_more_list').removeClass('pet_more_list_show');
    });*/
</script>
</body>
</html>